<template>
  <div>
    <div class="top">
      <div style="display: flex;align-items: center;">
        <div @click="entrench">应急防护</div>
        <div style="margin-left:20px" @click="policy">政策解读</div>
        <div style="margin-left:20px" @click="suggestClaick">意见发布</div>
        <div style="margin-left:20px" @click="dataClick">数据展示</div>
        <div style="margin-left:20px" @click="openpwd">修改密码</div>
        <div style="margin-left:20px" @click="out">退出</div>
      </div>
      <div @click="username">{{ userinfo.username }}</div>
    </div>
    <div class="home">
      <div class="topBanner">
        <h1>{{ title }}</h1>
        <!-- <h3>截止{{new Date().toLocaleString}}</h3> -->
      </div>
      <!-- <chart-border class="charts" v-if="allData.length>0">
        <china-card :allData="allData"></china-card>
      </chart-border>-->
      <chart-border class="charts">
        <world-card></world-card>
      </chart-border>

      <chart-border class="charts">
        <line-chart></line-chart>
      </chart-border>

      <chart-border class="charts">
        <bar-chart></bar-chart>
      </chart-border>

      <chart-border class="charts">
        <WorldCardRight></WorldCardRight>
      </chart-border>


      <ChinaChart class="chinaChart charts"></ChinaChart>

      <chart-border class="charts">
        <pie-chart></pie-chart>
      </chart-border>

      <chart-border class="charts">
        <BarChartRifht></BarChartRifht>
      </chart-border>

      <!-- <chart-border class="charts" v-if="historylist.length>0">
        <gradient-line-chart :chartData="historylist"></gradient-line-chart>
      </chart-border>-->


    </div>
    <el-dialog title="意见信息" :visible.sync="dialogFormVisible" top="30px">
      <el-form :model="form">
        <el-form-item label="发表意见">
          <el-input type="textarea" placeholder="请输入内容" v-model="suggest"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="suggestPush">确 定</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="gridData" max-height="400px">
        <el-table-column property="content" label="意见内容"></el-table-column>
        <el-table-column property="createTime" label="发布时间"></el-table-column>
        <el-table-column property="address" label="操作">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.$index, scope.row)" type="text" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="修改信息" :visible.sync="userVisible">
      <el-form ref="registerFormRef" :model="registerForm" :rules="registeRules">
        <el-form-item prop="username">
          <el-input placeholder="请输入你的用户名" v-model="registerForm.username" prefix-icon="el-icon-user"
            class="item"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input placeholder="请输入你的手机号" v-model="registerForm.phone" prefix-icon="el-icon-user"
            class="item"></el-input>
        </el-form-item>
        <el-form-item prop="sex">
          <el-select v-model="registerForm.sex" placeholder="请选择性别" style="width:100%">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" class="login-btn" @click="updataClick">修 改</el-button>
      </el-form>

    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="pwdVisible">
      <el-form ref="pwdRef" :model="pwd" :rules="pwdFormRef">
        <el-form-item prop="oldPassword">
          <el-input placeholder="请输入你的旧密码" v-model="pwd.oldPassword" prefix-icon="el-icon-unlock" type="password"
            class="item"></el-input>
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input placeholder="请输入你的新密码" v-model="pwd.newPassword" prefix-icon="el-icon-unlock" type="password"
            class="item"></el-input>
        </el-form-item>

        <el-button type="primary" class="login-btn" @click="updataPwd">修 改</el-button>
      </el-form>
    </el-dialog>


    <el-dialog :visible.sync="message" title="系统提示" width="50%" draggable :modal="false" top="60px"
      :close-on-click-modal="false">
      <div style="color: #fff;margin: 40px 10px;">{{ dialogData }}</div>
      <el-button type="primary" @click="noHint">
        不在提醒
      </el-button>
      <el-button @click="message = false">取消</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getDetailsList, suggestPush, suggestmySuggest, suggestmydelete, getDialog } from '@/api/echarts.js'
import { modifiuser, updatepassword } from '@/api/login.js'
import ChartBorder from '../components/ChartBorder'
import { setItem, getItem, removeAllItem } from '@/utils/auth.js'
import BarChartRifht from '@/components/BarChartRifht'
import WorldCard from '@/components/WorldCard'
import WorldCardRight from '@/components/WorldCardRight'
import BarChart from '@/components/BarChart'
import ChinaChart from '@/components/ChinaChart'
import LineChart from '@/components/LineChart'
import PieChart from '@/components/PieChart'
// import GradientLineChart from '@/components/GradientLineChart'

export default {
  name: 'Home',
  components: {
    ChartBorder,
    WorldCardRight,
    BarChartRifht,
    WorldCard,
    BarChart,
    ChinaChart,
    LineChart,
    PieChart
    // GradientLineChart
  },
  data() {
    return {
      dialogFormVisible: false,
      userVisible: false,
      pwdVisible: false,
      message: false,
      form: {},
      registerForm: {
      },
      pwd: {},
      pwdFormRef: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 15, message: '密码位数只能在6~15之间', trigger: 'blur' }
        ]
      },
      registeRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: '请输入正确的手机号码'
          }
        ],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }]

      },
      suggest: "",
      title: '新型冠状病毒疫情大数据展示系统',
      allData: {},
      list: [],
      userinfo: {},
      otherhistorylist: [],
      otherlist: [],
      worldData: [],
      historylist: [],
      barOtherlist: [],
      gridData: [],
      dialogData: '',
      intervalId:null
    }
  },
  watch: {
    $route(to, from) {
      if (to.path == '/home' && localStorage.getItem('noHint') == '0') {
        this.message = true
      }
    },
  },
  created() {
      // this.refreshData=setInterval(()=>{
      //     location.reload()
      //     console.log("定时任务执行了")
      // },1000*10);
    this.userinfo = getItem('userinfo')
    this.registerForm = getItem('userinfo')
    this.suggestList()
    // this.detailsList()
    // this.initData()
    // window.jsoncallback = data => {
    //   this.allData = data
    // }
    if (localStorage.getItem('noHint') == '0') {
      this.message = true
      this.dialogList()
    }

  },
  methods: {
    dialogList() {
      getDialog({ userId: this.userinfo.id }).then(res => {
        if (res.code == 200) {
          this.dialogData = res.msg
        }
      })
    },
    noHint() {
      //1--不提示 0--提示
      this.message = false
      localStorage.setItem('noHint', '1')
    },
    dataClick() {
      this.$router.push({ path: '/datalist', })
    },
    initData() {
      this.$jsonp('https://news.sina.com.cn/project/fymap/ncp2020_full_data.json', {
        callbackName: 'jsonpCallback'
      })
    },
    detailsList() {
      getDetailsList().then(res => {
        console.log('res', res)
        if (res.code == 200) {
          this.allData.list = res.data
        }
      })
    },
    suggestList() {
      suggestmySuggest({ userId: this.userinfo.id }).then(res => {
        console.log("biaog", res);
        if (res.code == 200) {
          this.gridData = res.data
        }
      })
    },
    suggestPush() {
      if (this.suggest != '') {
        suggestPush({ content: this.suggest, userId: this.userinfo.id }).then(res => {
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: '发布成功',
              type: 'success'
            });
            this.suggestList()
          }
        })
      } else {
        this.$message({
          showClose: true,
          message: '请输入意见内容',
          type: 'warning'
        });
      }
    },
    deleteRow(index, row) {
      console.log("index", index, row);
      suggestmydelete({ id: row.id, userId: row.userId }).then(res => {
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          });
          this.suggestList()
        } else {
          this.$message({
            showClose: true,
            message: '删除失败',
            type: 'errer'
          });
        }
      })
    },
    entrench() {
      this.$router.push({ path: '/entrench', })
    },
    policy() {
      this.$router.push({ path: '/policy', })
    },
    suggestClaick() {
      this.suggest = ''
      this.dialogFormVisible = true
    },
    username() {
      this.registerForm = getItem('userinfo')
      this.userVisible = true
    },
    updataClick() {
      this.$refs.registerFormRef.validate(async valid => {
        if (!valid) {
          return false
        }
        let data = {
          username: this.registerForm.username,
          phone: this.registerForm.phone,
          sex: this.registerForm.sex,
          id: this.registerForm.id
        }
        modifiuser(data).then(res => {
          if (res.code == 200) {
            setItem('userinfo', res.data)
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            });
            this.userVisible = false
            this.userinfo = getItem('userinfo')
            this.registerForm = getItem('userinfo')
          }
        })
      })
    },
    openpwd() {
      this.pwd = {}
      this.pwdVisible = true
    },
    updataPwd() {
      this.$refs.pwdRef.validate(async valid => {
        if (!valid) {
          return false
        }
        let data = {
          oldPassword: this.pwd.oldPassword,
          newPassword: this.pwd.newPassword,
          id: this.registerForm.id
        }
        updatepassword(data).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            });
            this.pwdVisible = false
          }
        })

      })
    },
    out() {
      this.$confirm('确定退出吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeAllItem()
        localStorage.clear()
        this.$router.push({ path: '/' })
      })
    }
  }
}
</script>

<style lang="less" >
.el-dialog__header {
  background: #0d336e !important;
}

.el-dialog__title,
.el-form-item__label {
  color: #fff !important;

}

.el-input,
.el-textarea__inner,
.el-input__inner {
  --el-input-background-color: #262c60 !important;
  background-color: #262c60 !important;
  --el-input-border: 1px solid #262c60 !important;
  --el-input-border-radius: none !important;
  --el-input-font-color: #fff !important;
  color: #fff !important;
  --el-input-hover-border: #262c60 !important;
  border-color: #262c60 !important;
  --el-color-danger: #262c60 !important;
}

.el-dialog__body {
  background: #001c58 !important;
}

::v-deep .el-table tr {
  background: #001c58 !important;

}

.el-input__inner {
  background: none !important;
}

.top {
  height: 40px;
  width: calc(100vw - 40px);
  background: #0d336e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
  color: #fff;
  cursor: pointer;
}

.home {
  width: calc(100vw - 60px);
  height: calc(100vh - 100px);
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column dense;
  gap: 10px;
  background-color: #001c58;
  grid-template-areas:
    '. cc .'
    '. cc .'
    '. cc .';
}

.topBanner {
  position: absolute;
  width: calc(100% - 60px);
  text-align: center;

  h1 {
    color: #fff;
    -webkit-text-stroke: 1px#fff;
  }

  h3 {
    color: #fff;
    -webkit-text-stroke: 1px #fff;
  }
}

@media screen and (max-width: 700px) {
  .home {
    width: calc(100vw - 60px);
    height: auto;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: column dense;
    gap: 10px;
    grid-template-areas:
      '.'
      'cc'
      '.'
      '.'
      '.'
      '.'
      '.'
      '.'
      '.';
  }

  .topBanner {
    position: static;
    width: calc(100vw - 60px);
  }

  .charts {
    min-height: 300px;
  }

  .chinaChart {
    height: 500px;
  }
}

.chinaChart {
  grid-area: cc;
}
</style>
<style></style>